<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./assets/index.css" />
    <style>
        .form-dl {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            box-shadow: 0 0 10px 5px #ccc;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form :model="form" label-width="auto" style="max-width: 200px" id="loginForm" class="form-dl" >
            <el-form-item label="登录名">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.pwd" show-password ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doSubmit">Login</el-button>
                <el-button type="reset" @click="doReset" >Reset</el-button>
            </el-form-item>
            <hr>
            <el-link href="./register.html" type="primary" >没有账号，去注册？</el-link>
        </el-form>
    </div>
    <script src="./assets/vue.global.prod.js"></script>
    <script src="./assets/index.full.js"></script>
    <script src="./assets/index.iife.min.js"></script>
    <script src="./assets/axios.min.js"></script>
    <script src="./assets/film.js"></script>
    <script>
        const { createApp } = Vue;
        let app = createApp({
            data() {
                return {
                    form: {
                        name: '',
                        pwd: ''
                    }
                }
            },
            methods: {
                async doSubmit() {
                    console.log('form:', this.form);
                    /*
                    try {
                        const resp = await axios.post('url', {  });
                        let result = resp.data;
                    } catch (error) {
                        console.log('error:', error);
                    }
                    */

                    try {
                        const resp = await axios.post('/user/login', {
                            loginName: this.form.name,
                            pwd: this.form.pwd,
                        });
                        let result = resp.data;
                        console.log('result:', result);

                        console.log(result.msg);
                        if(result.success){
                            //成功
                            // ElementPlus: this.$message 消息提示
                            this.$message.success(result.msg);
                            //存储登录用户数据
                            let user = result.data;
                            localStorage.setItem('token', user.token);
                            // JSON.stringify 把 js对象 转换为 string
                            let str = JSON.stringify(user);
                            localStorage.setItem('login', str);

                            //去 index
                            location.href = 'index.html';
                        } else {
                            //失败
                            this.$message.error(result.msg);
                        }
                    } catch (error) {
                        console.log('error:', error);
                    }
                },
                doReset() {
                    document.querySelector('#loginForm').reset();
                }
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>

</html>